<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="author" content="Miller Cy Chan">
	<meta name="viewport" content="width=device-width, initial-scale=1">	
</head>
<meta name="google-site-verification" content="uaVZxe8V55rvkhFV7liiebPRTTfOZhFySiFN97A11qw" />
<script>
function submitReq()
{
	document.getElementById("btnSubmit").setAttribute("disabled", "disabled");
	fetch("http://localhost:1953/index.json",
	{
		method: "POST",
		body: document.getElementById("data").value.split("\n").join("").split("\t").join("")
	})
	  .then(response => response.json())
	  .then(data => {
		document.getElementById("result").value = JSON.stringify(data);
		document.getElementById("btnSubmit").removeAttribute("disabled");
	  });
}
</script>
<form>
<div style="float:left; width:39%">
Data:
<textarea id="data" style="width: 100%; height: 88vh">
[
	{
		"prof": {
			"id": 1,
			"name": "Victor"
		}
	},
	{
		"prof": {
			"id": 2,
			"name": "Red"
		}
	},
	{
		"prof": {
			"id": 3,
			"name": "Philip"
		}
	},
	{
		"prof": {
			"id": 4,
			"name": "Marry"
		}
	},
	{
		"prof": {
			"id": 5,
			"name": "Don"
		}
	},
	{
		"prof": {
			"id": 6,
			"name": "Mark"
		}
	},
	{
		"prof": {
			"id": 7,
			"name": "Peter"
		}
	},
	{
		"prof": {
			"id": 8,
			"name": "John"
		}
	},
	{
		"prof": {
			"id": 9,
			"name": "Ben"
		}
	},
	{
		"prof": {
			"id": 10,
			"name": "Mike"
		}
	},{
		"prof": {
			"id": 11,
			"name": "Steve"
		}
	},
	{
		"prof": {
			"id": 12,
			"name": "Ann"
		}
	},
	{
		"prof": {
			"id": 13,
			"name": "Alex"
		}
	},
	{
		"course": {
			"id": 1,
			"name": "Introduction to Programming"
		}
	},
	{
		"course": {
			"id": 2,
			"name": "Introduction to Computer Architecture"
		}
	},
	{
		"course": {
			"id": 3,
			"name": "Business Applications"
		}
	},
	{
		"course": {
			"id": 4,
			"name": "English"
		}
	},
	{
		"course": {
			"id": 5,
			"name": "Discrete Mathematic I"
		}
	},
	{
		"course": {
			"id": 6,
			"name": "Linear Algebra"
		}
	},
	{
		"course": {
			"id": 7,
			"name": "Introduction to Information Technology I"
		}
	},
	{
		"course": {
			"id": 8,
			"name": "System Administration and Maintenance I"
		}
	},
	{
		"room": {
			"name": "R3",
			"lab": true,
			"size": 24
		}
	},
	{
		"room": {
			"name": "R7",
			"lab": false,
			"size": 60
		}
	},
	{
		"group": {
			"id": 1,
			"name": "1O1",
			"size": 19
		}
	},
	{
		"group": {
			"id": 2,
			"name": "1O2",
			"size": 19
		}
	},
	{
		"group": {
			"id": 3,
			"name": "1O3",
			"size": 19
		}
	},
	{
		"group": {
			"id": 4,
			"name": "1S1",
			"size": 19
		}
	},
	{
		"class": {
			"professor": 1,
			"course": 1,
			"duration": 2,
			"groups": [ 1, 2 ]
		}
	},
	{
		"class": {
			"professor": 1,
			"course": 1,
			"duration": 2,
			"groups": [ 3, 4 ]
		}
	},
	{
		"class": {
			"professor": 9,
			"course": 1,
			"duration": 3,
			"group": 1,
			"lab": true
		}
	},
	{
		"class": {
			"professor": 9,
			"course": 1,
			"duration": 3,
			"group": 2,
			"lab": true
		}
	},
	{
		"class": {
			"professor": 9,
			"course": 1,
			"duration": 3,
			"group": 3,
			"lab": true
		}
	},
	{
		"class": {
			"professor": 9,
			"course": 1,
			"duration": 3,
			"group": 4,
			"lab": true
		}
	},
	{
		"class": {
			"professor": 2,
			"course": 2,
			"duration": 2,
			"group": [ 3, 4 ]
		}
	},
	{
		"class": {
			"professor": 2,
			"course": 2,
			"duration": 2,
			"group": [ 1, 2 ]
		}
	},
	{
		"class": {
			"professor": 3,
			"course": 2,
			"duration": 2,
			"group": 1,
			"lab": true
		}
	},
	{
		"class": {
			"professor": 3,
			"course": 2,
			"duration": 2,
			"group": 2,
			"lab": true
		}
	},
	{
		"class": {
			"professor": 3,
			"course": 2,
			"duration": 2,
			"group": 3,
			"lab": true
		}
	},
	{
		"class": {
			"professor": 3,
			"course": 2,
			"duration": 2,
			"group": 4,
			"lab": true
		}
	},
	{
		"class": {
			"professor": 4,
			"course": 4,
			"duration": 2,
			"group": [ 3, 4 ]
		}
	},
	{
		"class": {
			"professor": 4,
			"course": 4,
			"duration": 2,
			"group": [ 3, 4 ]
		}
	},
	{
		"class": {
			"professor": 4,
			"course": 4,
			"duration": 2,
			"group": [ 1, 2 ]
		}
	},
	{
		"class": {
			"professor": 4,
			"course": 4,
			"duration": 2,
			"group": [ 1, 2 ]
		}
	},
	{
		"class": {
			"professor": 5,
			"course": 6,
			"duration": 2,
			"group": [ 1, 2, 3 ]
		}
	},
	{
		"class": {
			"professor": 5,
			"course": 6,
			"duration": 2,
			"group": [ 1, 2, 3 ]
		}
	},
	{
		"class": {
			"professor": 7,
			"course": 5,
			"duration": 2,
			"group": [ 1, 2, 3 ]
		}
	},
	{
		"class": {
			"professor": 7,
			"course": 5,
			"duration": 2,
			"group": [ 1, 2 ]
		}
	},
	{
		"class": {
			"professor": 10,
			"course": 5,
			"duration": 2,
			"group": 3
		}
	},
	{
		"class": {
			"professor": 8,
			"course": 3,
			"duration": 2,
			"group": 2
		}
	},
	{
		"class": {
			"professor": 8,
			"course": 3,
			"duration": 2,
			"group": 3
		}
	},
	{
		"class": {
			"professor": 12,
			"course": 3,
			"duration": 2,
			"group": 1
		}
	},
	{
		"class": {
			"professor": 12,
			"course": 3,
			"duration": 2,
			"group": 4
		}
	},
	{
		"class": {
			"professor": 11,
			"course": 7,
			"duration": 2,
			"group": 4
		}
	},
	{
		"class": {
			"professor": 13,
			"course": 8,
			"duration": 2,
			"group": 4
		}
	}
]
</textarea>
</div>
<div style="float:right; width:59%">
Result:
<textarea id="result" readonly="readonly" style="width: 100%; height: 88vh"></textarea>
</div>
<div style="clear: both; padding-left: 45vw; padding-top: 1em">
<input type="button" id="btnSubmit" value="Submit" onclick="submitReq()" />
</div>
</form>
</html>